window, addEventListener('load', function () {
    //常驻导航栏
    var dd = document.querySelector('.index-dd');
    var lis = dd.querySelectorAll('li');
    var cons = document.querySelector('.index-dd-con').querySelectorAll('.dd-con-item');
    dd.addEventListener('mouseleave', function () {
        for (var i = 0; i < cons.length; i++) {
            cons[i].style.display = 'none';
        }
    });
    for (var i = 0; i < lis.length; i++) {
        // 设置索引号
        lis[i].setAttribute('index', i);
        //鼠标事件
        lis[i].addEventListener('mouseover', function () {
            var index = this.getAttribute('index');
            for (var i = 0; i < cons.length; i++) {
                cons[i].style.display = 'none';
            }
            cons[index].style.display = 'block';
        });
        cons[i].addEventListener('mouseenter', function () {
            this.style.display = 'block';
        });
        cons[i].addEventListener('mouseleave', function () {
            this.style.display = 'none';
        });
    }
    //---首页轮播图---
    // 动态生成进度条
    var mainPromo = document.querySelector('.main-promo');
    var ul = mainPromo.querySelector('ul');
    var ol = mainPromo.querySelector('.promo-nav');
    for (let i = 0; i < ul.children.length; i++) {
        // 创建li
        var li = document.createElement('li');
        //通过自定义属性，给Li添加索引号
        li.setAttribute('index', i);
        // 将li插入ol中
        ol.appendChild(li);
        //li排他思想，给每个li添加点击事件      在生成Li的同时，直接绑定点击事件
        li.addEventListener('click', function () {
            //所有li清除selected类名
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            //当前li设置selected类名
            this.className = 'selected';
            // 点击li移动图片
            var index = this.getAttribute('index');
            //当点击了li,就要把这个li的索引号给num
            num = index;
            //当点击了li,就要把这个li的索引号给circle
            circle = index;
            var changeWidth = ul.children[i].offsetWidth;
            animate(ul, -index * changeWidth - 200);
        });
    }
    // 默认把ol中的第一个li设置为selected
    ol.children[0].className = 'selected';
    //克隆第一张图片，放到ul最后
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 点击前进按钮，图片前进一张
    var next = document.querySelector('.next');
    var num = 0;
    var circle = 0;
    next.addEventListener('click', function () {
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        var changeWidth = ul.children[num].offsetWidth;
        num++;
        animate(ul, -num * changeWidth - 200);
        //点击前进按钮，进度条一同变化
        circle++;
        //走到最后一张图片，复原
        if (circle == ol.children.length) {
            circle = 0;
        }
        // 调用函数
        circleChange();
    });
    // 点击后退按钮，图片后退一张
    var prev = document.querySelector('.prev');
    prev.addEventListener('click', function () {
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * changeWidth + 'px';
        }
        var changeWidth = ul.children[num].offsetWidth;
        num--;
        animate(ul, -num * changeWidth - 200);
        //点击后退按钮，进度条一同变化
        circle--;
        //走到第一张图片，复原
        // if (circle < 0) {
        //     circle = ol.children.length - 1;
        // }
        circle = circle < 0 ? ol.children.length - 1 : circle;
        // 调用函数
        circleChange();
    });
    function circleChange() {
        //所有li清除selected类名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        //当前li设置selected类名
        ol.children[circle].className = 'selected';
    }
    // 自动播放轮播图
    var timer = setInterval(function () {
        // 自动播放类似于点击了一次前进按钮
        //手动调用点击事件
        next.click();
    }, 5000);
    //鼠标经过，停止自动播放
    mainPromo.addEventListener('mouseenter', function () {
        clearInterval(timer);
        //清除定时器变量
        timer = null;
    });
    mainPromo.addEventListener('mouseleave', function () {
        timer = setInterval(function () {
            // 自动播放类似于点击了一次前进按钮
            //手动调用点击事件
            next.click();
        }, 5000);
    });
    //---倒计时---   
    var hour = document.querySelector('.hour');
    var minute = document.querySelector('.minute');
    var second = document.querySelector('.second');
    //倒计时截止时间
    var inputTime = +new Date('2022-6-25 00:00:00');
    //先调用一次函数，防止页面刷新有空白
    countDown();
    //开启定时器
    setInterval(countDown, 1000);
    function countDown() {
        var nowTime = +new Date();
        var times = (inputTime - nowTime) / 1000;
        var h = parseInt(times / 60 / 60 % 24);
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h;
        var m = parseInt(times / 60 % 60);
        m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;
        var s = parseInt(times % 60);
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;
    }
    //---中部轮播图--- 
    var midPromo = document.querySelector('.mid-promo');
    var midUl = midPromo.querySelector('ul');
    var midOl = midPromo.querySelector('.promo-nav');
    // 动态生成进度条
    for (let i = 0; i < midUl.children.length; i++) {
        // 创建li
        var li = document.createElement('li');
        //通过自定义属性，给Li添加索引号
        li.setAttribute('mid-index', i);
        // 将li插入ol中
        midOl.appendChild(li);
        //li排他思想，给每个li添加点击事件      在生成Li的同时，直接绑定点击事件
        li.addEventListener('click', function () {
            //所有li清除selected类名
            for (var i = 0; i < midOl.children.length; i++) {
                midOl.children[i].className = '';
            }
            //当前li设置selected类名
            this.className = 'selected';
            // 点击li移动图片
            var index = this.getAttribute('mid-index');
            //当点击了li,就要把这个li的索引号给num
            midNum = index;
            //当点击了li,就要把这个li的索引号给circle
            midCircle = index;
            var changeWidth = midUl.children[i].offsetWidth;
            animate(midUl, -index * changeWidth);
        });
    }
    // 默认把ol中的第一个li设置为selected
    midOl.children[0].className = 'selected';
    //克隆第一张图片，放到ul最后
    var first = midUl.children[0].cloneNode(true);
    midUl.appendChild(first);
    function midCircleChange() {
        //所有li清除selected类名
        for (var i = 0; i < midOl.children.length; i++) {
            midOl.children[i].className = '';
        }
        //当前li设置selected类名
        midOl.children[midCircle].className = 'selected';
    }
    // 自动播放轮播图
    var midNum = 0
    var midCircle = 0;
    var midTimer = setInterval(function () {
        if (midNum == midUl.children.length - 1) {
            midUl.style.left = 0;
            midNum = 0;
        }
        var midChangeWidth = midUl.children[midNum].offsetWidth;
        midNum++;
        animate(midUl, -midNum * midChangeWidth)
        //进度条一同变化
        midCircle++;
        //走到最后一张图复原
        if (midCircle == midOl.children.length) {
            midCircle = 0;
        }
        //调用函数
        midCircleChange();
    }, 5000);
    //鼠标经过，停止自动播放
    midPromo.addEventListener('mouseenter', function () {
        clearInterval(midTimer);
        //清除定时器变量
        midTimer = null;
    });
    midPromo.addEventListener('mouseleave', function () {
        midTimer = setInterval(function () {
            if (midNum == midUl.children.length - 1) {
                midUl.style.left = 0;
                midNum = 0;
            }
            var midChangeWidth = midUl.children[midNum].offsetWidth;
            midNum++;
            animate(midUl, -midNum * midChangeWidth)
            //进度条一同变化
            midCircle++;
            //走到最后一张图复原
            if (midCircle == midOl.children.length) {
                midCircle = 0;
            }
            //调用函数
            midCircleChange();
        }, 5000);
    });
    //产品模块
    var productType = document.querySelectorAll('.product-type');
    var productBd = document.querySelectorAll('.product-bd');
    var lis = productType[0].querySelectorAll('li');
    var lis1 = productType[1].querySelectorAll('li');
    var productBdCons = productBd[0].querySelectorAll('.product-bd-con');
    var productBdCons1 = productBd[1].querySelectorAll('.product-bd-con');
    //选项卡部分
    for (var i = 0; i < lis.length; i++) {
        //设置索引号
        lis[i].setAttribute('index', i);
        lis[i].addEventListener('mouseup', function () {
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
            }
            this.className = 'select';
            //显示内容部分
            var index = this.getAttribute('index');
            for (var i = 0; i < productBdCons.length; i++) {
                productBdCons[i].style.display = 'none';
            }
            productBdCons[index].style.display = 'block';
        });
    }
    for (var i = 0; i < lis1.length; i++) {
        //设置索引号
        lis1[i].setAttribute('index', i);
        lis1[i].addEventListener('mouseup', function () {
            for (var i = 0; i < lis1.length; i++) {
                lis1[i].className = '';
            }
            this.className = 'select';
            var index = this.getAttribute('index');
            for (var i = 0; i < productBdCons1.length; i++) {
                productBdCons1[i].style.display = 'none';
            }
            productBdCons1[index].style.display = 'block';
        });
    }
});